<template>
  <div>
    <span>
      <el-button type="text" @click="add">点击添加餐品</el-button>
    </span>
     <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="productsname"
          label="餐品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="productsintr"
          label="餐品简介"
          width="180">
        </el-table-column>
        <el-table-column
          prop="state"
          label="餐品状态">
        </el-table-column>
        <el-table-column
           prop="seqnum"
           label="餐品序列号">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="餐品备注">
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-row>
               <el-button type="primary" @click="update(scope.row)">修改按钮</el-button>
                <el-button type="success" @click="deleteByProduct(scope.row)">删除按钮</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
              <el-form :model="form">
                <el-form-item label="餐品名称" >
                  <el-input v-model="form.productsname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="餐品简介" >
                   <el-input v-model="form.productsintr" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="餐品状态" >
                   <el-input v-model="form.state" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="餐品序列号" >
                   <el-input v-model="form.seqnum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="餐品备注">
                   <el-input v-model="form.remark" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
            </span>
          </el-dialog>
  </div>
</template>

<script>
export default {
name: "StoreManage",
 data() {
      return {
        total:'',
        prev:'',
        next:'',
        pager:'',
        form:{
              id:"",
              productsname:"",
              productsintr:"",
              state:0,
              seqnum:0,
              remark:""
        },
        flag:0,
        dialogVisible: false,
        input: '',
        tableData: [
          {

          }
        ],
      }
    },
 methods:{
      submit(){
         console.log(this.form)
        if(this.flag==0){
             this.$http.put("/productsInfo/add",this.form).then(resp=>{
                  if(resp.data.code==200){
                        alert("添加成功!")
                        this.initProductsData()
                     }else{
                   alert("添加失败")
              }
           })

        }else{
             this.$http.post("/productsInfo/update",this.form).then(resp=>{
                 if(resp.data.code==200){
                     alert("更新成功!")
                     this.initProductsData()
                  }else{
                 alert("更新失败")
             }
         })
        }
        this.dialogVisible=false;
      },
      add(){
            this.flag=0
            this.form.id="",
           this.form.productsname="",
           this.form.productsintr="",
           this.form.state=0,
           this.form.seqnum=0,
          this.form.remark=""
        this.dialogVisible=true
      },
      search(){
          this.$http.get("/productsInfo/select").then(resp=>{
            if(resp.data.code==200){
              alert("查询成功!")
            }else{
              alert("查询失败")
            }
          })
      },
      deleteByProduct(row){
        console.log(row)
        this.$http.post("/productsInfo/delete/",row).then(resp=>{
          if(resp.data.code==200){
            alert("删除成功!")
            this.initProductsData()
          }else{
            alert("删除失败!")
            }
        })
      },
      update(row){
        this.flag=1
        this.form=row
        this.dialogVisible=true
        console.log(row)
      },
       handleClose(done) {
              this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
              },
       initProductsData(){
               this.$http.get("/productsInfo/select/1/10").then(resp=>{
                  if(resp.data.code==200){
                      console.log(resp.data.data.data)
                      this.tableData=resp.data.data.data
                     }
               })
        }
       },
       created() {
        this.initProductsData()
       }

}
</script>

<style >
.el-input{
  width: 45%
}




</style>
